<template>
  <div class="contribute-page">
    <div class="page-header">
      <h1>贡献指南</h1>
      <p class="subtitle">欢迎加入我们的开源社区，一起打造更好的技术学习平台</p>
    </div>

    <div class="contribute-content">
      <div class="contribute-section">
        <h2>如何贡献</h2>
        <div class="contribute-cards">
          <div class="contribute-card">
            <i class="icon-doc"></i>
            <h3>提交技术文档</h3>
            <p>分享您的技术经验，帮助他人学习</p>
            <button class="btn btn-primary" @click="showDocGuide">查看指南</button>
          </div>
          
          <div class="contribute-card">
            <i class="icon-code"></i>
            <h3>提交代码</h3>
            <p>修复问题或添加新功能</p>
            <button class="btn btn-primary" @click="showCodeGuide">查看指南</button>
          </div>
          
          <div class="contribute-card">
            <i class="icon-bug"></i>
            <h3>报告问题</h3>
            <p>帮助我们发现和解决问题</p>
            <button class="btn btn-primary" @click="showIssueGuide">查看指南</button>
          </div>
          
          <div class="contribute-card">
            <i class="icon-translate"></i>
            <h3>翻译文档</h3>
            <p>帮助我们将内容翻译成更多语言</p>
            <button class="btn btn-primary" @click="showTranslateGuide">查看指南</button>
          </div>
        </div>
      </div>

      <div class="contribute-section">
        <h2>贡献流程</h2>
        <div class="process-steps">
          <div class="process-step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h3>Fork 项目</h3>
              <p>在 GitHub 上 Fork 项目到您的账号下</p>
            </div>
          </div>
          
          <div class="process-step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h3>创建分支</h3>
              <p>基于 main 分支创建新的功能分支</p>
            </div>
          </div>
          
          <div class="process-step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h3>提交更改</h3>
              <p>在您的分支上进行修改并提交</p>
            </div>
          </div>
          
          <div class="process-step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h3>发起 Pull Request</h3>
              <p>向主项目发起 Pull Request</p>
            </div>
          </div>
        </div>
      </div>

      <div class="contribute-section">
        <h2>行为准则</h2>
        <div class="code-of-conduct">
          <p>我们致力于为每个人提供友好、安全和包容的环境，无论其性别、性取向、能力、种族、社会经济地位和宗教信仰如何。</p>
          <p>请遵守以下行为准则：</p>
          <ul>
            <li>使用欢迎和包容的语言</li>
            <li>尊重不同的观点和经验</li>
            <li>优雅地接受建设性的批评</li>
            <li>关注社区的最佳利益</li>
            <li>对其他社区成员表现出同理心</li>
          </ul>
        </div>
      </div>

      <div class="contribute-section">
        <h2>常见问题</h2>
        <div class="faq-list">
          <div class="faq-item">
            <h3>如何开始我的第一次贡献？</h3>
            <p>我们建议从标记为 "good first issue" 的问题开始，这些问题通常比较简单，适合新手贡献者。</p>
          </div>
          
          <div class="faq-item">
            <h3>如何找到适合我的贡献方式？</h3>
            <p>您可以根据自己的技能和兴趣选择不同的贡献方式，比如编写文档、修复 bug、添加新功能等。</p>
          </div>
          
          <div class="faq-item">
            <h3>贡献后如何获得反馈？</h3>
            <p>我们的维护者会尽快审查您的贡献，并提供反馈。您也可以在 PR 中 @ 相关维护者。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const showDocGuide = () => {
  // TODO: 实现文档贡献指南弹窗
}

const showCodeGuide = () => {
  // TODO: 实现代码贡献指南弹窗
}

const showIssueGuide = () => {
  // TODO: 实现问题报告指南弹窗
}

const showTranslateGuide = () => {
  // TODO: 实现翻译贡献指南弹窗
}
</script>

<style scoped>
.contribute-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 48px;
}

.page-header h1 {
  font-size: 36px;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 18px;
  color: var(--text-secondary);
}

.contribute-section {
  margin-bottom: 48px;
}

.contribute-section h2 {
  font-size: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
}

.contribute-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.contribute-card {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
}

.contribute-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contribute-card i {
  font-size: 32px;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.contribute-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.contribute-card p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-number {
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.step-content p {
  color: var(--text-secondary);
  margin: 0;
}

.code-of-conduct {
  background-color: var(--bg-secondary);
  padding: 24px;
  border-radius: 8px;
}

.code-of-conduct p {
  margin-bottom: 16px;
}

.code-of-conduct ul {
  margin: 0;
  padding-left: 20px;
}

.code-of-conduct li {
  margin-bottom: 8px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-item {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.faq-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.faq-item p {
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .contribute-cards {
    grid-template-columns: 1fr;
  }
  
  .process-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .step-number {
    margin-bottom: 16px;
  }
}
</style> 